<template>
    <div :class="{ leftMenu: true, width: show }">
        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#d3e3fd" text-color="#007acc" active-text-color="#007acc"  unique-opened="true" :collapse="show">
            <el-menu-item index="1" @click="enterSfzyAction">
                <i class="el-icon-house"></i>
                <span slot="title">十方智育</span>
            </el-menu-item>
            <!-- v k i 分别是值、键、下标 -->
            <el-submenu v-for="(v, k, i) in menuObj" :index=i :key="k">
                <template slot="title">
                    <i class="el-icon-star-off"></i>
                    <span slot="title">{{ k }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="(value, j) in v" :key="j" @click="showComponent(value, k)">{{ value
                        }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            
        </el-menu>
    </div>
</template>
<script>
export default {
    name: "LeftMenuView",
    data() {
        return {
            table: {
                firstTable: " ",
                secondTable: " ",
            },
            firstTable: " ",

            // 键是一级标题 值=数组 是二级标题
            menuObj: {
                管理员管理: ["用户管理","公司信息管理"],
                心理测评管理: ["1","2"],
                心理知识管理: ["3","4"],
                心理答疑管理: ["用户管理","公司信息管理"],
                公益中心管理: ["用户管理","公司信息管理"],
                精选文章管理: ["用户管理","公司信息管理"],
                课程管理: ["课程管理","公司信息管理"],
                咨询预约: ["用户管理","公司信息管理"],
                公告管理: ["用户管理","公司信息管理"],
            },
            // 点击二级标题切换组件 将二级标题作为键值对的键名
            // 点击二级标题 查找对应的路由路径
            routerObj: {
                用户管理: "/admin/user",
                公司信息管理:"/admin/componey",
                课程管理:"/course/course"
            },
        }
    },
    props: ["show"],
    methods: {
        handleOpen(value) {
            console.log(value);
        },
        handleClose(value) {
            console.log(value);
        },
        enterSfzyAction() {
            this.$router.push("/sfzy").catch(() => { });
            this.table.firstTable = '十方之域';
            this.table.secondTable = ' ';
            this.$emit("tableChange", this.table)
        },
        // 点击二级标题事件 将标题作为键 取出对应的路由 切换组件
        showComponent(key, k) {
            let path = this.routerObj[key];
            console.log(key);
            console.log(k);
            this.table.firstTable = k;
            this.table.secondTable = key
            this.$router.push(path).catch(() => { })
            console.log(this.table)
            this.$emit("tableChange", this.table)

        }
    }
}
</script>

<style scoped>
.width {
    width: 65px !important;
}

.leftMenu {
    width: 230px;
    /* 1vh=设备高度的1% 将当前设备的高度分100份一份就是1vh */
    height: 100vh;
    background-color:#d3e3fd;
    position: fixed;
    left: 0;
    top: 0;
    box-sizing: border-box;
    /* 盒模型总宽度210px */
    transition: width .5s;
}

/* 媒介查询 就是检测浏览器宽高的变化 做出页面布局调整 */
@media only screen and (max-width:1000px) {

    /* 页面宽度在1000以内 才会执行此处代码 */
    /* max-width:1000px 最大能监听到1000px的宽度 */
    .leftMenu {
        visibility: hidden;
    }
}

.el-menu-vertical-demo {
    border-right: 0;
}
</style>